<template>
    <div class="form_tab">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="上级分类">
                <el-select v-model="ruleForm.category" class="m-2" size="large">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="数量单位">
                <el-input v-model="ruleForm.num" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="ruleForm.sort" />
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group v-model="ruleForm.show">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否显示在导航栏">
                <el-radio-group v-model="ruleForm.showNav">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="分类图标">
                <el-upload v-model:file-list="fileList" class="upload-demo"
                    action="http://xue.cnkdl.cn:9082/mall-admin/minio/upload" :on-preview="handlePreview"
                    :on-remove="handleRemove" list-type="picture" :on-success="uploadingFn">
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png文件，且不超过100kb
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="筛选属性">
                <div class="input_list">
                    <el-cascader v-model="ruleForm.property" :options="options2 as any" :props="props" />
                    <el-button>删除</el-button>
                </div>
                <div class="button_box">
                    <el-button type="primary">新增</el-button>
                </div>
            </el-form-item>
            <el-form-item label="关键字">
                <el-input v-model="ruleForm.keyword" />
            </el-form-item>
            <el-form-item label="分类描述">
                <el-input v-model="ruleForm.describe" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="resetFn">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script lang="ts" setup>

import { isReactive, onMounted, reactive, ref, watch, type Ref } from 'vue'
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
import useTable from '@/hooks/useTable';
import * as request from "@/request/modules/productCategory"
interface CategoryList {
    id: number;
    parentId: number;
    name: string;
    level: number;
    productCount: number;
    productUnit: string;
    navStatus: number;
    showStatus: number;
    sort: number;
    icon?: string;
    keywords: string;
    description?: any;
}
interface oo {
    value: string | number,
    label: string,
}
interface optionsInf {
    value: string | number,
    label: string,
    children: oo[]
}
const props = {
    expandTrigger: 'hover' as const,
}
const options = ref([{
    value: 0,
    label: "无上级分类",
}]) as Ref<optionsInf[]>;
const options2 = ref([]) as Ref<optionsInf[]>;
let info = getProperty();
console.log(info);

async function getProperty() {
    let superior = await request.productCategoryAPI({
        parentId: 0,
        pageSize: 100,
        pageNum: 1
    })
    superior.list.forEach((item) => {
        options.value.push({
            value: item.id,
            label: item.name,
            children: []
        })
    })
    let property = await request.withAttrAPI();
    console.log(property);

    property.forEach((item, index) => {
        options2.value.push({
            value: item.id,
            label: item.name,
            children: []
        })
        if (item.productAttributeList.length) {
            item.productAttributeList.forEach(items => {
                options2.value[index].children.push({
                    value: items.id,
                    label: items.name
                })
            })
        }
    })
    return superior.list;
}

const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive({
    name: '',
    category: 0,
    num: "",
    sort: 0,
    show: 0,
    showNav: 0,
    property: 0,
    keyword: '',
    describe: "",
    icon: ""
})
//校验规则
const rules = reactive<FormRules>({
    name: [
        { required: true, message: '该字段不能为空', trigger: ['change', 'blur'] },
    ],
})
//提交
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid, fields) => {
        if (valid) {
            await request.createAPI({
                description: ruleForm.describe,
                icon: ruleForm.icon,
                keywords: ruleForm.keyword,
                name: ruleForm.name,
                navStatus: ruleForm.showNav,
                parentId: 0,
                productAttributeIdList: ruleForm.property === 0 ? [0] : ruleForm.property,
                productUnit: ruleForm.num,
                showStatus: ruleForm.show,
                sort: ruleForm.sort
            })
            resetFn();
        } else {
            console.log('error submit!', fields)
        }
    })
}
//重置
const resetFn = () => {
    ruleForm.name = ''
    ruleForm.category = 0
    ruleForm.num = ''
    ruleForm.sort = 0
    ruleForm.show = 0
    ruleForm.showNav = 0
    ruleForm.property = 0
    ruleForm.keyword = ''
    ruleForm.describe = ''
}
//提交图片
//上传图片
const fileList = ref<UploadUserFile[]>([]);

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
    console.log(file)
}
//上传
const uploadingFn = (res: any) => {
    ruleForm.icon = res.data.url;
}
</script>
  
<style lang="less" scoped>
.el-form {
    padding: 43.5px;
}

.form_tab {
    margin: 35px auto;
    border: 1px solid #ccc;
    width: 790px;
}

::v-deep(.el-form-item__label) {
    width: 140px !important;

}
</style>